<template>
	<view>
		<scroll-view class="reg-scroll" scroll-y>
			<view class="code-detail d-f a-i-c">短信验证码已发送至您的手机{{phone}}</view>
			<view class="reg-form">
				<view :class="{'input': true, 'input-active': isCode}">
					<input class="input__text" type="number" maxlength="4" @input="changeCodeInput" @focus="onFocusCode" @blur="onBlurCode"/>
					<view class="input__label">
						<view v-show="!isCode" class="input__label-content">请输入短信验证码</view>
						<view v-show="isCode" class="input__label-content">短信验证码</view>
					</view>
					<view class="input__line"/>
				</view>
				<view :class="{'input': true, 'input-active': isCodea}">
					<input class="input__text"  maxlength="8" @input="changeCodeaInput" @focus="onFocusCodea" @blur="onBlurCodea"/>
					<view class="input__label">
						<view v-show="!isCodea" class="input__label-content">请输入邀请码</view>
						<view v-show="isCodea" class="input__label-content">邀请码</view>
					</view>
					<view class="input__line"/>
				</view>
				<view :class="{'input': true, 'input-active': isPass}">
					<input class="input__text" password maxlength="16" @input="changePassInput" @focus="onFocusPass" @blur="onBlurPass"/>
					<view class="input__label">
						<view v-show="!isPass" class="input__label-content">请设置6-16位数字或字母作为登录密码</view>
						<view v-show="isPass" class="input__label-content">6-16位登录密码</view>
					</view>
					<view class="input__line"/>
				</view>
				<view class="next-step">
					<slw-button v-if="code.length === 4 && pass.length >= 6 && codea.length>0" circle class="button user-login" @click="onUserRegister">注册</slw-button>
					<slw-button v-else circle disabled class="button user-login">注册</slw-button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {siteSmsCode, siteRegister} from '@/api/site.js'
	import SlwButton from '@/components/slw-ui/button/index.vue'
	import {toUserLoginPage, toUserPage} from '@/utils/PageRouter.js'
	import {setLoginInfo} from '@/utils/storage.js'
	
	export default {
		components: {SlwButton},
		data() {
			return {
				code: '',
				codea: '',
				pass: '',
				phone: '',
				isCode: false,
				isCodea: false,
				isPass: false,
				isAllow: false,
			}
		},
		onLoad(option) {
			this.phone = option.phone
			this.siteSmsCode(option.phone)
		},
		methods: {
			//	发送短信验证码
			siteSmsCode (phone) {
				siteSmsCode ({mobile: phone, usage: 'register'}).then(res => {
					// res
				}).catch(res => {
					uni.showToast({title: res.message, icon: 'none'})
				})
			},
			toUserLoginPage () {
				toUserLoginPage(true)
			},
			changeCodeInput(e) {
				const {detail: {value}} = e
				this.code = value
			},
			changeCodeaInput(e) {
				const {detail: {value}} = e
				this.codea = value
			},
			changePassInput(e) {
				const {detail: {value}} = e
				this.pass = value
			},
			onFocusCode () {
				this.isCode = true
			},
			onBlurCode (e) {
				if (e.detail.value.length === 0) {
					this.isCode = false
				}
			},
			onFocusPass () {
				this.isPass = true
			},
			onBlurPass (e) {
				if (e.detail.value.length === 0) {
					this.isPass = false
				}
			},
			onFocusCodea() {
				this.isCodea = true
			},
			onBlurCodea (e) {
				if (e.detail.value.length === 0) {
					this.isCodea = false
				}
			},
			//	用户注册
			onUserRegister () {
				const {code, codea, phone, pass} = this
				uni.showLoading({title: '加载中...'})
				siteRegister({code, staff_code: codea, mobile: phone, password: pass, password_repetition: pass, group: 'app'}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.showToast({title: '登录成功', icon: 'none'})
						setLoginInfo(res.data)
						toUserPage()
						uni.setStorageSync('first_key',1)
					} else {
						uni.showToast({title: res.message, icon: 'none'})
					}
				}).catch(res => {
					uni.hideLoading()
					uni.showToast({title: res.message, icon: 'none'})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reg-scroll /deep/{
		height: 100vh;
		background: #fff;
		.code-detail{
			width: 100%;
			height: 80rpx;
			color: $theme_color;
			padding-left: 30rpx;
			background: rgba($theme_color, 0.1);
			// baasd
		}
		.reg-form{
			padding: 60rpx;
		}
		
		.user-protocol{
			display: flex;
			font-size: 20rpx;
			margin: 18rpx 0 40rpx;
			.user-read{
				margin-right: 20rpx;
				&:before{right: initial;font-size: 24rpx;}
				.uni-radio-input{
					width: 32rpx;
					height: 32rpx;
					border: 0;
					background: #eee;
				}
				.uni-radio-input-checked{
					background: #1cc7b9 !important;
				}
			}
			.text{
				color: #999;
			}
		}
		
		//	下一步
		.next-step{
			margin-top: 30rpx;
			.user-login{
				button{
					font-size: 24rpx;
				}
			}
			.disabled{
				button{
					background: #ccc;
				}
			}
		}
		.to-login{
			font-size: 24rpx;
			padding-top: 20rpx;
		}
	}
	
	
	
	.input {
		position: relative;
		vertical-align: top;
		overflow: hidden;
		padding: 40rpx 0 20rpx;
	}
	
	
	.input__text {
		position: relative;
		.uni-input-input{
			padding: 0.5em 0em 0.25em;
			font-size: 2em;
		}
		z-index: 10;
	}
	
	.input__label {
		color: #9e9e9e;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 20rpx;
		transition: transform 0.2s 0.15s;
		transform-origin: left;
		&-content {
			font-size: 32rpx;
			position: relative;
			display: block;
			width: 100%;
		}
	}
	
	.input__line {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-bottom: 2rpx solid rgb(229,229,229);
	}
	
	
	.input-active{
		.input__label{
			transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
		}
		.input__line{
			border-color: $theme_color;
		}
	}
</style>
